<template>
	<view class="h-screen flex flex-col">
		<NavBarVue title="情感类"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30 pb-20">
					<view class="box-two mb-20">
						<ImageBoxVue class="character" src="/static/card/character8.png" width="208rpx" height="196rpx">
						</ImageBoxVue>
						<view class="flex justify-end">
							<view class="category">{{list[0].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[0].dlist[0].name}}</view>
							<view class="card-desc">{{list[0].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[0].dlist[0])">下一步</view>
						</view>
					</view>
					<view class="box-year mb-20">
						<ImageBoxVue class="character" src="/static/card/character9.png" width="272rpx" height="192rpx">
						</ImageBoxVue>
						<view class="flex">
							<view class="category">{{list[1].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[1].dlist[0].name}}</view>
							<view class="card-desc">{{list[1].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[1].dlist[0])">下一步</view>
						</view>
					</view>
					<view class="box-month mb-20">
						<ImageBoxVue class="character" src="/static/card/character10.png" width="248rpx" height="212rpx">
						</ImageBoxVue>
						<view class="flex justify-end">
							<view class="category">{{list[2].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[2].dlist[0].name}}</view>
							<view class="card-desc">{{list[2].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[2].dlist[0])">下一步</view>
						</view>
					</view>
					<view class="box-march">
						<ImageBoxVue class="character" src="/static/card/character11.png" width="224rpx" height="220rpx">
						</ImageBoxVue>
						<view class="flex">
							<view class="category">{{list[3].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[3].dlist[0].name}}</view>
							<view class="card-desc">{{list[3].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[3].dlist[0])">下一步</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'

	const id = ref("")
	const list = ref([])
	const style = [{
		character: ''
	}]

	onLoad((options) => {
		if (options.id) {
			id.value = options.id
		}
	})
	onShow(() => {
		getCardtypeatSonlist()
	})

	const handleNext = (item) => {
		uni.navigateTo({
			url: `/pages/test/cardDetail?id=${item.id}`
		})
	}
	const getCardtypeatSonlist = () => {
		const opt = {
			id: id.value
		}
		testApi.getCardtypeatSonlist(opt).then(res => {
			list.value = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.box-two {
		position: relative;
		padding-top: 42rpx;

		.character {
			position: absolute;
			top: 0;
			left: 56rpx;
			z-index: 100;
		}

		.category {
			background: url(/static/card/title8.png) no-repeat;
			background-size: cover;
			width: 364rpx;
			height: 52rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #D53C2E;
			line-height: 52rpx;
			text-align: center;
			margin-bottom: 26rpx;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #FEBF35;
			border-radius: 40rpx;
			background: #fff;
			padding: 80rpx 40rpx 66rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title8.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 112rpx;
				padding-right: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: right;
			}

			.card-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				z-index: 100;
			}
		}
	}

	.box-year {
		position: relative;
		padding-top: 50rpx;

		.character {
			position: absolute;
			top: 0;
			right: 26rpx;
			z-index: 100;
		}

		.category {
			background: url(/static/card/title9.png) no-repeat;
			background-size: cover;
			width: 364rpx;
			height: 52rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #4744C3;
			line-height: 52rpx;
			text-align: center;
			margin-bottom: 26rpx;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #C992DD;
			border-radius: 40rpx;
			background: #fff;
			padding: 80rpx 40rpx 46rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title9.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 116rpx;
				padding-left: 76rpx;
				font-weight: 500;
				font-size: 52rpx;
				color: #FFFFFF;
				line-height: 90rpx;
			}

			.card-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				z-index: 100;
			}
		}
	}

	.box-month {
		position: relative;
		padding-top: 66rpx;

		.character {
			position: absolute;
			top: 0;
			left: 42rpx;
			z-index: 100;
		}

		.category {
			background: url(/static/card/title10.png) no-repeat;
			background-size: cover;
			width: 364rpx;
			height: 52rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #2965B8;
			line-height: 52rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #03B5EF;
			border-radius: 40rpx;
			background: #fff;
			padding: 80rpx 40rpx 56rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title10.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 112rpx;
				padding-right: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: right;
			}

			.card-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

	.box-march {
		position: relative;
		padding-top: 40rpx;

		.character {
			position: absolute;
			top: 0;
			right: -16rpx;
			z-index: 100;
		}

		.category {
			background: url(/static/card/title11.png) no-repeat;
			background-size: cover;
			width: 364rpx;
			height: 52rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #B2386C;
			line-height: 52rpx;
			text-align: center;
			margin-bottom: 26rpx;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #FF7CB4;
			border-radius: 40rpx;
			background: #fff;
			padding: 80rpx 40rpx 66rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title11.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 112rpx;
				padding-left: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 90rpx;
			}

			.card-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}
</style>